<template>
  <view class="vote-list">
    <block v-if="list.length > 0">
    <view @click="navto(item)" class="vote-item" v-for="item in list" :key="item.voteId">
      <!-- <u-image radius="8rpx" width="180rpx" height="180rpx" class="vote-img" :src="item.picUrl" mode="aspectFill" /> -->
      <view class="vote-content">
        
        <view class="vote-status">
          <Tag :text="getVoteStatus(item).statusText" :type="getVoteStatus(item).statusClass.replace('status-', '')" />
        </view>
        <view class="vote-title u-line-2">{{ item.voteTitle }}</view>
        <view class="vote-time">开始时间：{{ item.startDate }}</view>
        <view class="vote-time">结束时间：{{ item.endDate }}</view>
      </view>
    </view>
    	<!-- <u-loadmore 
			
				:status="status"
				:loadmoreText="loadmoreText"
				:nomoreText="nomoreText"
				:loadingText="loadingText"
				dashed
				line
    /> -->
        </block>
        <block v-else>
         <u-empty
              mode="data"
              text="暂无投票"
              
      />
        </block>
  </view>
</template>

<script>
import ls from '@/util/ls'
import { mapState } from 'vuex'
import Tag from '@/components/tag/index.vue'
export default {
  name: 'VoteList',
  components: {
    Tag
  },
  props: {
    list: {
      deep:true,
      type: Array,
      default: () => []
    },
    // status: {
    //   type: String,
    //   default: 'loadmore'
    // }
  },
  computed:{
    ...mapState("community",["communityId"]),
  },
  data(){
    return {
      loadmoreText: '轻轻上拉',
      nomoreText: '我是有底线的',
      loadingText: '努力加载中',
      user:ls.get("user")
    }
  },
  methods: {
    navto(item){
      
      ls.set("voteInfo",item)
      uni.navigateTo({
        url: `/pages/votingForm/index?voteId=${item.voteId}&communityId=${this.communityId}&wxUserId=${this.user.wxUser.wxUserId}&type=${item.type}`
      })
    },
    getVoteStatus(item) {
      if (!item || !item.startDate) {
        return {
          statusText: '未知',
          statusClass: 'status-end'
        };
      }
      const now = new Date().getTime();
      const start = new Date(item.startDate.replace(/-/g, '/')).getTime();
      const end = new Date(item.endDate.replace(/-/g, '/')).getTime();

      if (now < start) {
        return {
          statusText: '未开始',
          statusClass: 'status-notstart'
        };
      } else if (now >= start && now <= end) {
        return {
          statusText: '进行中',
          statusClass: 'status-doing'
        };
      } else {
        return {
          statusText: '已结束',
          statusClass: 'status-end'
        };
      }
    }
  }
}
</script>

<style >

.vote-list {
  margin-top: 20rpx;
  padding: 0 20rpx;
  
}
.vote-item {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,0.04);
  overflow: hidden;
  padding: 30rpx;
}
.vote-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
}
.vote-content {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.vote-title {
  font-size: 30rpx;
  color: #333333;
  font-weight: 500;
  margin-top: 10rpx;
}
.vote-status {
  align-self: flex-start;
}
.status-tag {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  font-weight: 500;
}
.status-notstart {
  color: #027AFF;
  background: rgba(2, 122, 255, 0.1);
}
.status-doing {
  color: #15D662;
  background: rgba(21, 214, 98, 0.1);
}
.status-end {
  color: #F72424;
  background: rgba(247, 36, 36, 0.1);
}
.vote-time {
  font-size: 24rpx;
  color: #999;

}
</style>
